<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8">
<title>modal</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<title>modal</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.modal-backdrop{
	opacity: 0.5;
	filter: alpha(opacity=50);
	background: #f00;
	height:100% 
}

/* .modal.modal-dialog
{z-index:1050} */
</style>
</head>
<!-- END HEAD -->

<body class="">
	
<!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button> -->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#mytest">Call My Modal</button>

<div clss="modal-backdrop"></div>
<div class="modal modal-scroll fade in" id="mytest" data-backdrop="static" tabindex="-1" role="dialog" >
	<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">Modal Title</h4>
				</div>
				<div class="modal-body">
     				 <div class="row">
				        <div class="col-md-8 col-md-offset-2">
				          <select class="form-control">
				            <option>
				              1
				            </option>
				
				            <option>
				              2
				            </option>
				
				            <option>
				              3
				            </option>
				
				            <option>
				              4
				            </option>
				
				            <option>
				              5
				            </option>
				          </select>
				        </div>
				      </div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save</button>
				</div>
			</div>
		</div>
</div>





<script src="../script/jquery/jquery.min.js" type="text/javascript"></script>
<script src="../script/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script src="../script/bootstrap/bootstrap-modal.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {   
	jQuery("#popupCSS").modal({
		"backdrop":true,
		"keyboard":true,
		"show":true
	})
});
</script>
</body>
</html>
